<template>
  <div class="login-box">
    <el-form :model="loginForm" :rules="rules" ref="loginForm" class="login-form">
      <h3 class="title">系 统 注 册</h3>
      <el-form-item prop="user_id">
        <el-input
            v-model="loginForm.user_id"
            autocomplete="off"
            placeholder="账 号"
            prefix-icon="el-icon-goods">
        </el-input>
      </el-form-item>
      <el-form-item prop="user_name">
        <el-input
            v-model="loginForm.user_name"
            autocomplete="off"
            placeholder="姓 名"
            prefix-icon="el-icon-user">
        </el-input>
      </el-form-item>
      <el-form-item prop="user_psw">
        <el-input :type="textType"
                  v-model="loginForm.user_psw"
                  autocomplete="off"
                  placeholder="密 码"
                  prefix-icon="el-icon-time">
          <i slot="suffix" class="el-input__icon el-icon-view btn-eye" @click="changeType"></i>
        </el-input>
      </el-form-item>
      <el-form-item prop="customer_sex">
        <el-input v-model="loginForm.customer_sex"
                  autocomplete="off"
                  placeholder="性 别"
                  prefix-icon="el-icon-user">
        </el-input>
      </el-form-item>
      <el-form-item prop="customer_tel">
        <el-input v-model="loginForm.customer_tel"
                  autocomplete="off"
                  placeholder="电话号码"
                  prefix-icon="el-icon-phone-outline">
        </el-input>
      </el-form-item>
      <el-form-item prop="customer_address">
        <el-input v-model="loginForm.customer_address"
                  autocomplete="off"
                  placeholder="地 址"
                  prefix-icon="el-icon-location-outline">
        </el-input>
      </el-form-item>
      <el-form-item v-show="showMsg" style="margin-bottom:0;">
        <span class="text-danger">提示：注册失败，请检查输入是否正确，或是否已经注册</span>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="register('loginForm')" class="login-btn" v-loading="loading">注 册
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import * as requires from '../network/require'

export default {
  data() {
    return {
      loginForm: {
        user_id: '',
        user_name: '',
        user_psw: '',
        customer_sex: '',
        customer_tel: '',
        customer_address: ''
      },
      rules: {
        user_id: [
          {required: true, message: ' ', trigger: 'blur'}
        ],
        user_name: [
          {required: true, message: ' ', trigger: 'blur'}
        ],
        user_psw: [
          {required: true, message: ' ', trigger: 'blur'}
        ],
        customer_sex: [
          {required: true, message: ' ', trigger: 'blur'}
        ],
        customer_tel: [
          {required: true, message: ' ', trigger: 'blur'}
        ],
        customer_address: [
          {required: true, message: ' ', trigger: 'blur'}
        ]
      },
      loading: false,
      showMsg: false,
      textType: 'password'
    }
  },
  methods: {
    register(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          requires.register(this.loginForm).then((res) => {
            if (res.data) {
              // 延迟两秒，演示登录按钮加载效果  转跳
              setTimeout(() => {
                this.loading = false
                sessionStorage.setItem('user', JSON.stringify(this.loginForm))
                alert("注册成功，点击确定转跳登录页面")
                this.$router.replace('/login')
              }, 2000)
            } else {
              this.loading = false
              this.showMsg = true
            }
          })
        } else {
          alert('要填写完整才能注册哦');
          return false
        }
      })
    },
    changeType() {
      this.textType = (this.textType === 'password' ? 'text' : 'password')
    }
  }
}
</script>

<style scoped>
.login-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #20222A;
}

.login-form {
  border-radius: 5px;
  background-clip: padding-box;
  margin: 80px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #f5f5f5;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 5px #cac6c6;


}

.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}

.btn-eye {
  cursor: pointer;
}

.text-danger {
  color: #F56C6C;
}

.login-btn {
  margin: 35px 0 10px 0;
  width: 100%;
}

</style>
